<template>
  <uploader
    :options="options"
    @file-added="fileAdded"
    @file-error="fileError"
    @file-success="fileSuccess"
    @file-removed="removed"
    @file-progress="progress"
    class="uploader-example"
  >
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>上传素材</p>
      <uploader-btn>选择文件</uploader-btn>
      <uploader-btn :attrs="attrs">选择图片</uploader-btn>
      <uploader-btn :directory="true">选择文件夹</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
export default {
  data() {
    return {
      //     dialogAddDeviceForm: false,
      // loading: false,
      options: {
        target: "http://localhost:9000/upload",
        testChunks: false,
        chunkSize: 1024 * 1024 * 2, //1MB
        simultaneousUploads: 3, //并发上传数
        headers: {
          "access-token": "abcd1234"
        }
      },
      attrs: {
        accept: "image/*"
      }
    };
  },
  methods: {
    // 添加了一个文件的事件，一般用作文件校验
    fileAdded(file) {
      console.log(file);
    },
    //文件上传过程出错
    fileError(rootFile, file, message, chunk) {
      console.log(rootFile, file, message, chunk);
    },
    // 文件成功上传，第一个参数rootFile是或包含File对象，file是File对象，message是服务端响应内容字符串，chunk是chunk实例，应该是本文件最后一个块实例。chunk.xhr.status就是这个文件上传的响应码
    fileSuccess(rootFile, file, message, chunk) {
      console.log(rootFile, file, message, chunk);
    },
    // 一个文件被移除
    removed(file) {
      console.log(file);
    },
    // 一个文件正在上传事件
    progress(rootFile, file, message) {
      console.log(rootFile, file, message);
    }
  }
};
</script>

<style>
</style>